<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude" py:strip=''>
<xi:include href="webpyte_includes.html" />

<!--! ImageMan List
Dependencies: jquery.contextmenu.r2.js. -->

<py:def function="ImageManListStyle()">
  <style>
    #ImageList { max-height: 500px; overflow: auto; }
    #ImageListStatus { color: #888; }
    #ImageList * {
        display: inline-block;
        vertical-align: middle;
    }
    #ImageList li {
        padding: 5px;
        width: 60px;
        height: 40px;
        font-size: 10px;
        overflow:hidden;
    }
    #ImageList img {
        max-height: 50px;
        max-width: 50px;
        margin: 5px;
        border: 1px dotted #aaa;
    }
  </style>
</py:def>

<py:def function="ImageManList()">
  <div id='ImageListStatus'>To get actions, right-click an image.
    To toggle size, left-click.</div>
  <ul id='ImageList'><li></li></ul>
  <div class='contextMenu' id='imgMenu'>
    <ul>
        <li id="rename">Rename</li>
        <li id="delete">Delete</li>
    </ul>
  </div>
  <script>
    $(document).ready(function(){
      var qimagelist = $("#ImageList");
      imagelist = qimagelist.get(0);
      imagelist.innerHTML = '';
      
      configImg = function(img, imagename) {
        img.src = "${img_container}" + imagename;
        img.imagename = imagename;
        img.onload = function(e) {
          img.title = imagename + " (" + img.naturalWidth + "x";
          img.title += img.naturalHeight + ")";
        };
        img.onclick = function(e) {
          if (this.clientHeight == this.naturalHeight) {
            this.style.maxHeight = '';
            this.style.maxWidth = '';
            this.style.height = null;
            this.style.width  = null;
          } else {
            this.style.maxHeight = this.naturalHeight + "px";
            this.style.height    = this.naturalHeight + "px";
            this.style.maxWidth = this.naturalWidth + "px";
            this.style.width    = this.naturalWidth + "px";
          }
        }
        $(img).contextMenu('imgMenu', imagelist.menuconfig);
      };
      
      imagelist.menuconfig = {bindings: {
        'rename': function(img) {
          var newname = prompt('Digite o novo nome para a imagem\n' +
                img.imagename, img.imagename);
          if (! newname) return false;
          //$.post(url, data, callback, "json")
          $.post("${rename_url}",
                 {'oldname':img.imagename, 'newname':newname},
                 function(ret){
                   if (ret.success) {
                     $('#ImageListStatus').html('Renamed: ' + ret.image);
                     configImg(img, newname);
                   } else alert(ret.error);
                 },
                 'json');
        },
        'delete': function(img) {
          if (!confirm("Are you sure you want to ERASE this image?\n" + img.imagename)) return false;
          $.post("${delete_url}",
                 {'image':img.imagename},
                 function(ret){
                   if (ret.success) {
                     $('#ImageListStatus').html('Deleted: ' + ret.image);
                     $(img).remove();
                   }
                   else alert(ret.error);
                 },
                 'json');
        }
      }};
      $.getJSON("${get_names_url}", {}, function(ret){
          $.each(ret.images, function(i, imagename){
            var li = document.createElement('li');
            li.onmouseover = function(e) {
                var img = document.createElement('img');
                configImg(img, imagename);
                imagelist.replaceChild(img, li);
            };
            var dispname = imagename.replace(/.jpe?g$/, '');
            li.innerHTML = dispname;
            qimagelist.append(li);
          });
      });
      
      notifyUpload = function(imagename) {
        var img = document.createElement('img');
        configImg(img, imagename);
        qimagelist.prepend(img); //imagelist.appendChild(img);
      }
    });
  </script>
</py:def>

</html>
